<template>
<!-- 视频直播 -->
  <div class="content">
    <div v-if="status==1"  class='noData'  style="margin-top:0">
        <img v-if="imgUrl" :src="imgUrl + 'unopenedBgIcon.png'"/>
        <p>医生暂未开播  ~</p>
    </div>
    <div class="page-box" v-else :style="{backgroundImage: 'url(' + (imgUrl + 'bg.png') + ')'}">
      <div class="video-box" :style="{height:pulling ? '100%' : 'calc(100% - 0rpx)' }">
        <live-player
          id="livePlayer"
          class="video"
          :src="src"
          :mode="mode"
          :autoplay="autoplay"
          :muted="muted"
          :orientation="orientation"
          :object-fit="objectFit"
          @statechange="statechange"
          @fullscreenchange="fullscreenchange"
          @netstatus="netstatus"
          @error="error"
        >
        </live-player>
        <!-- <div class="inputBg"></div> -->
        <div :class="['iptDiv',{'isIphoneX':ifIphonex}]">
          <div class="input">
            <input v-model="textVal" placeholder="说点什么..." confirm-type="send"  @confirm="sendText" placeholder-style="color:#fff;font-size:28rpx;" confirm-typ="done"/>
            <div @click="sendText">发送</div>
            <!-- <span @click="showPresent=true">
              <img src="/static/images/present.png" alt="">
            </span>
            <span >
               <img src="/static/images/clearText.png" alt="">
            </span>  -->
          </div>
        </div>
        <div class="docInfo" v-if="showDoctor">
          <div class="docTop">
            <img src="/static/images/clearText.png" @click="showDoctor = false"/>
          </div>
          <div class="docBtm">
            <img :src="accountInfo.doctor_image"/>
            <div class="docBtmFr">
              <div class="docBtmFrTop nowrap">
                <span>{{accountInfo.doctor_name}}　</span><span>{{accountInfo.title}} / {{accountInfo.dept_name}}</span>
              </div>
              <div class="docBtmFrBtm">
                擅长：{{accountInfo.skilled_in}}
              </div>
            </div>
          </div>
        </div>
        <div class="docInfo presentBox" v-if="showPresent">
          <div class="docTop">
            <img src="/static/images/clearText.png" @click="showPresent = false"/>
          </div>
          <div class="presentItem">
            <ul>
              <li>
                <div class="imgBox flowerBox">
                  <img src="/static/images/flower.png" alt="">
                </div>
                <div class="sendBtn">发送</div>
              </li>
              <li>
                <div class="imgBox flagBox">
                  <img src="/static/images/flag.png" alt="">
                </div>
                <div class="sendBtn">发送</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="headDiv" :style="{top: navBtnInfo.top + navBtnInfo.height + 'px'}">
      <div class="headFl">
        <img v-if="imgUrl" :src="imgUrl + 'navigation_back.png'" @click="back"/>
        <img :src="accountInfo.doctor_image" @click="showDoctor = true"/>
        <span @click="showDoctor = true">{{accountInfo.doctor_name}}</span>
      </div>
      <div class="doDiv">
        <div @click="switchMuted" :class="muted ? 'action-param-item' : 'f-disable action-param-item'">
          <img v-if="imgUrl" :src="imgUrl + 'mute.png'">
        </div>
        <div @click="swicthObjectFit" :class="objectFit === 'contain' ? 'action-param-item' : 'f-disable action-param-item'">
          <img v-if="imgUrl" :src="imgUrl + 'adapt.png'">
        </div>
        <div @click="switchOrientation" :class="orientation === 'vertical' ? 'f-disable action-param-item' : 'action-param-item'">
          <img v-if="imgUrl" :src="imgUrl + 'anyway.png'">
        </div>
      </div>
    </div>
    <scroll-view scroll-y="true" :scroll-top="scrollTop" class="chatDiv">
      <ul>
        <li v-for="(item, index) in chatList" :key="index" class="clearfix">
          <span class="li">
            <div>{{item.fromNick}}：</div><div>{{item.text}}</div>
          </span>
        </li>
      </ul>
    </scroll-view>
    <i-toast id="toast" />
    <!-- <i-modal :visible="modal" @ok="ok" @cancel='cancel'>
      <p>是否退出登录并关闭直播？</p>
    </i-modal> -->
    <div class="modal" v-if="modal" style="display:block">
      <div class="out">
        <div class="top" >
          <span>是否结束本次直播</span>
        </div>
        <div class="btm" >
          <span @click='cancel' class="cancelClass">取消</span>
          <span @click="ok">确定</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  let app = getApp()
  import SDK from '../nim/vendors/NIM_Web_SDK_miniapp_v7.8.1'
  const { $Toast } = require('../../../../../static/iview/base/index')
  import api from '@/api/api'
  import sha256 from '@/utils/sha256'
  import { mapState } from 'vuex'
  export default {
    computed: {
      ...mapState([
        'ifIphonex'
      ])
    },
    data () {
      return {
        accountInfo: {},
        textVal: '',
        roomid: '',
        pulling: false,
        livePlayerContext: {},
        src: '', //	音视频地址。目前仅支持 flv, rtmp 格式
        mode: 'live', // live（直播），RTC（实时通话）
        autoplay: false,
        muted: false,
        orientation: 'vertical', // 画面方向，可选值有 vertical，horizontal
        objectFit: 'fillCrop', // 填充模式，可选值有 contain，fillCrop
        imgUrl: '',
        modal: false,
        liveShow: true,
        status: '',
        chatList: [],
        scrollTop: 0,
        navBtnInfo: {},
        showDoctor: false,
        doctor_id: '',
        showPresent: false
      }
    },
    // 生命周期函数--监听页面初次渲染完成
    onReady () {
      this.createContext();
      wx.setKeepScreenOn({
        keepScreenOn: true,
      })
      // this.play()
    },
    // 生命周期函数--监听页面显示
    onShow () {
      wx.setKeepScreenOn({
        keepScreenOn: true
      })
    },
    // 生命周期函数--监听页面卸载
    onUnload () {
      this.stop()
      if (app.globalData.chatroomInstance) {
        app.globalData.chatroomInstance.destroy({
          done: () => {
            app.globalData.chatroomInstance = null
            app.globalData.inChatroom = false
            console.log('退出聊天室')
          }
        })
      } else {
        app.globalData.chatroomInstance = null
        app.globalData.inChatroom = false
      }
      wx.setKeepScreenOn({
        keepScreenOn: false,
      })
    },
    onLoad (options) {
      Object.assign(this.$data, this.$options.data())
      console.log(this.ifIphonex,'ifIphonex')
      this.accountInfo = {
        skilled_in: options.skilled_in,
        doctor_name: options.doctor_name,
        doctor_image: options.doctor_image,
        dept_name: options.dept_name,
        title: options.title
      }
      console.log(this.accountInfo)
      this.getNavInfo()
      this.textVal = ''
      this.liveShow = true
      this.src = this.$route.query.url || 'rtmp://v0c8a7cab.live.126.net/live/28fbaf85f1c44fd18dea9c453bf391cc'
      this.status = this.$route.query.status || 3
      this.roomid = options.roomId || '222073826'
      this.imgUrl = 'https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/'
      this.pulling = false
      this.livePlayerContext = {}
      this.autoplay = false
      this.muted = false
      this.chatroomInstance()
      setTimeout(() => {
        this.play()
      }, 1000)
      // that.pulling = true
    },
    mounted () {
    this.imgUrl = 'https://ks3-cn-beijing.ksyun.com/wxapp/wdrm/image/'
    //   this.getUserLimits()
    // this.createContext();
    wx.setKeepScreenOn({
      keepScreenOn: true,
    })
    },
    methods: {
      queryDoctor () {
        this.$api.doctorDetails({doctor_id:this.doctor_id}).then(res=>{
          console.log(res)
        })
      },
      // 返回
      back () {
        mpvue.navigateBack(1)
      },
      getNavInfo () {
        let menuButtonObject = wx.getMenuButtonBoundingClientRect();
        this.navBtnInfo = menuButtonObject
      },
      // 连接上服务器
      onChatroomConnect(chatroomInfo) {
        console.log('连接服务器成功', chatroomInfo)
      },
      // 收到消息
      onChatroomMsgs (msgs) {
        console.log('onChatroomMsgs', msgs)
        let self = this
        msgs.map(msg => {
          switch (msg.type) {
            case 'notification': {
              self.addNotificationToRender(msg)
              break
            }
            case 'text': {
              self.addTextToRender(msg)
              break
            }
          }
        })
      },
      // 添加通知消息到渲染队列中
      addNotificationToRender(msg) {
        console.log(msg, '消息通知')
      },
      // 添加文本(包含emoji)消息到渲染队列中
      addTextToRender(msg) {
        console.log('添加文本(包含emoji)消息到渲染队列中', msg)
        this.$set(this.chatList, this.chatList.length, msg)
        // 滚动到底部
        this.scrollToBottom()
      },
      // 发生错误
      onChatroomError(error, obj) {
        console.log('发生错误', error, obj);
        this.toastAndBack()
      },
      // 已经断开连接
      onChatroomDisconnect(error) {
        console.log('已经断开连接', error);
        this.toastAndBack()
      },
      // 发送错误 返回上一页面
      toastAndBack() {
        // clearTimeout(this.pageTimer)
        // this.pageTimer = setTimeout(() => {
        //   wx.showToast({
        //     title: '连接已断开,即将返回',
        //     duration: 2000,
        //     success: function () {
        //       // mpvue.navigateBack(1)
        //     }
        //   })
        // }, 200)
      },
      chatroomInstance () {
        let accountInfo = this.$storage.getAccountInfo()
        this.$api.liveGetChatroomAddress({roomid: this.roomid, netease_id:accountInfo.netease_id, clienttype: '3'}, {'showLoading': true}).then(res=>{
          let roomUrlList = [...res.data]
          let Chatroom = SDK.Chatroom
          // 获取指定聊天室实例
          let self = this
          let chatroomInstance = Chatroom.getInstance({
            appKey: '49352b711abd0a8424635fcd75f3c1f0',
            account: accountInfo.netease_id,
            token: accountInfo.netease_token,
            reconnectionAttempts: 10,
            chatroomId: this.roomid,
            chatroomAddresses: roomUrlList,
            onconnect: self.onChatroomConnect,
            onerror: self.onChatroomError,
            ondisconnect: self.onChatroomDisconnect,
            onmsgs: self.onChatroomMsgs
          });
          // 暂存聊天室实例
          app.globalData.chatroomInstance = chatroomInstance
        })
      },
      // 选择礼物 
      choosePresent () {
        
      },
      // 发送弹幕
      sendText () {
        let self = this
        if (self.textVal.trim() == '') {
          $Toast({
            content: '请填写内容后再发送'
          });
          return
        }
        let text = self.textVal
        app.globalData.chatroomInstance.sendText({
          text,
          done: (err, msg) => {
            if (err) {
              console.log(err)
              return
            }
            // 刷新界面
            self.textVal = ''
            self.addTextToRender(msg)

          }
        })
      },
      scrollToBottom() {
        let self = this
        this.scrollTop = this.scrollTop + 3000
      },
      onShareAppMessage: function () {
    return {
      title: '直播播放',
      path: 'pages/pull/index',
      imageUrl: this.imgUrl + 'share.png'
    }
  },
  createContext: function () {
    // this.setData({
      this.livePlayerContext = wx.createLivePlayerContext('livePlayer')
    // })
  },
  inputSrc: function (e) {
    this.checkUrl(e.mp.detail.value)
    // this.setData({
      this.src = e.mp.detail.value
    // })
    this.createContext();
  },
  scanQRCode: function () {
    var that = this
    that.data.livePlayerContext.stop()
    wx.scanCode({
      success: function(res) {
        console.log(res)
        if (res.scanType === 'QR_CODE' && res.errMsg === 'scanCode:ok') {
          that.createContext();
          // that.setData({
            that.src = res.result
          // })
        } else {
          let imgUrl = that.imgUrl + 'err_icon.png'
          wx.showToast({
            image: '/static/images/err_icon.png',
            title: '获取地址失败'
          })
        }
      }
    })
  },
  checkUrl: function (str) {
    let that = this
    if (/^(rtmp|RTMP):\/\/[\w\/\.?&_=-]+$/.test(str) || /^(http|HTTP|https|HTTPS):\/\/[\w\/\.&_=-]+\.flv[\w\/\.=?&_-]*$/.test(str)) {
      return true
    }
    let imgUrl = that.imgUrl + 'err_icon.png'
    wx.showToast({
      image: '/static/images/err_icon.png',
      title: '不可用的地址'
    })
    return false
  },
  play: function () {
    console.log('播放地址',this.src)
    if (!this.checkUrl(this.src)) {
      return
    }
    var that = this
    this.livePlayerContext.play({
      success: function (res) {
        // that.setData({
          that.pulling = true
        // })
      },
      fail: function (res) {
        console.log(that.imgUrl + 'err_icon.png','播放失败路径')
        let imgUrl = that.imgUrl + 'err_icon.png'
        wx.showToast({
          image: '/static/images/err_icon.png',
          title: '播放失败'
        })
        // that.$router.go(-1)
      }
    })
    // that.setData({
      that.pulling = true
    // })
  },
  stop: function () {
    var that = this
    this.livePlayerContext.stop({
      success: function (res) {
        // that.setData({
          that.pulling = false
        // })
      },
      fail: function (res) {
        let imgUrl = that.imgUrl + 'err_icon.png'
        wx.showToast({
          image: '/static/images/err_icon.png',
          title: '操作失败'
        })
      }
    })
  },
  pause: function () {
    var that = this
    this.livePlayerContext.pause({
      success: function (res) {
        // that.setData({
          that.pulling = false
        // })
      },
      fail: function (res) {
        let imgUrl = that.imgUrl + 'err_icon.png'
        wx.showToast({
          image: '/static/images/err_icon.png',
          title: '操作失败'
        })
      }
    })
  },
  resume: function () {
    var that = this
    this.livePlayerContext.resume({
      success: function (res) {
        // that.setData({
          that.pulling = true
        // })
      },
      fail: function (res) {
        let imgUrl = that.imgUrl + 'err_icon.png'
        wx.showToast({
          image: '/static/images/err_icon.png',
          title: '操作失败'
        })
      }
    })
  },
  switchMuted() {
    // this.setData({
      this.muted = !this.muted
    // })
  },
  switchOrientation() {
    // this.setData({
      this.orientation = this.orientation === 'vertical' ?  'horizontal' : 'vertical'
    // })
  },
  swicthObjectFit() {
    // this.setData({
      this.objectFit = this.objectFit === 'contain' ?  'fillCrop' : 'contain'
    // })
  },
  statechange(e) {
    console.log('推流数据',e)
    if ([2006, 3005].indexOf(+e.mp.detail.code) !== -1) {
      this.stop()
      let that = this
      let imgUrl = that.imgUrl + 'err_icon.png'
      setTimeout(function () {
        wx.showToast({
          image: '/static/images/err_icon.png',
          title: '主播停止推流'
        })
      }, 800)
    }
    if ([-2301, 3001, 3002, 3003].indexOf(+e.mp.detail.code) !== -1) {
      this.stop()
      let that = this
      let imgUrl = that.imgUrl + 'err_icon.png'
      setTimeout(function () {
        console.log(that.imgUrl + 'err_icon.png','播放失败路径')
        wx.showToast({
          image: '/static/images/err_icon.png',
          title: '播放失败'
        })
      }, 800)
    }
  },
  fullscreenchange(e) {
    console.log('fullscreenchange: ', e.mp.detail)
  },
  netstatus(e) {
    // console.log('live-player info:', e.mp.detail.info)
  },
  error(e) {
    console.error('live-player error:', e.mp.detail.errMsg)
    let that = this
    console.log(that.imgUrl + 'err_icon.png','播放失败路径')
    let imgUrl = that.imgUrl + 'err_icon.png'
    wx.showToast({
      image: '/static/images/err_icon.png',
      title: '播放失败'
    })
  }
    }
  }
</script>

<style scoped lang='less'>
  .headDiv {
    position: absolute;
    left: 0;
    top: 50rpx;
    width: 100%;
    .headFl {
      float: left;
      display: flex;
      align-items: center;
      img:nth-child(1) {
        width: 20rpx;
        height: 35rpx;
        padding: 10rpx 27rpx 10rpx 27rpx;
      }
      img:nth-child(2) {
        width: 70rpx;
        height: 70rpx;
        border-radius: 100%;
        margin: 0 17rpx 0 0rpx;
      }
    }
  }
  .doDiv {
    float: right;
    display: flex;
    align-items: center;
    height: 70rpx;
    div {
      float: left;
      padding: 10rpx;
      margin: 10rpx;
    }
    img {
      display: block;
      width: 44rpx;
      height: 44rpx;
    }
  }
  .chatDiv {
    width: 600rpx;
    padding-right: 10rpx;
    height: 500rpx;
    position: absolute;
    left: 0;
    bottom: 160rpx;
    margin-left: 25rpx;
    ul {
      height: 100%;
      padding-right: 10rpx;
    }
    li {
      width: 100%;
      overflow: hidden;
    }
    .li {
      margin-bottom: 9rpx;
      border-radius:7px;
      padding: 11rpx 20rpx;
      background:rgba(0,0,0, 0.39);
      font-size: 26rpx;
      line-height: 37rpx;
      display: inline-block;
      overflow: hidden;
      max-width: 600rpx!important;
      white-space: normal!important;
      div:nth-child(1) {
        color: #9DBAFF;
        height: 100%;
        float: left;
        overflow: hidden;
      }
      div:nth-child(2) {
        color:#fff;
        word-break: break-all!important;
        white-space: normal!important;
        overflow: hidden;
      }
    }
  }
  .inputBg {
    position: absolute;
    bottom: 0;
    height: 690rpx;
    width: 100%;
    background-color: rgba(63, 63, 63, 1);
  }
.content {
    // flex: 1;
    // overflow: scroll;
    width: 100%;
height: 100%;
background: #000;
color: #fff;
  }
.ipt-box {
  height: 100rpx;
}
.action {
  height: 280rpx;
}
.action-play {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 220rpx;
}
.action-play-img {
  display: inline-block;
  margin: 10rpx auto 20rpx;
  width: 134rpx;
  height: 134rpx;
}
.action-param {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 220rpx;
}
.action-param-line {
  height: 50%;
}
.action-param-line-1 .action-param-item {
  margin-top: 20rpx;
}
.action-param-line-2 .action-param-item {
  margin-top: 5rpx;
}
.action-param-img {
  display: inline-block;
  margin: 18rpx auto 12rpx;
  width: 44rpx;
  height: 44rpx;
}
.mode-menu {
  position: absolute;
  bottom: 262rpx;
  right: 155rpx;
  width: 112rpx;
  height: 194rpx;
  background: rgba(0,0,0,0.4);
  border-radius: 8rpx;
  text-align: center;
}
.mode-menu-item {
  height: 33.2%;
}
.mode-menu-img {
  display: inline-block;
  margin-top: 10rpx;
  width: 44rpx;
  height: 44rpx;
}
body, page {
  height: 100%;
}
.f-o-v {
  overflow: visible;
}
.f-db {
  display: block;
}
.f-disable {
  opacity: 0.4;
}
.f-c-red {
  color: red;
}
.coverImg {
   position: absolute;
   background: #fff;
}
.page-box {
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
}
.ipt-box {
  position: relative;
  width: 100%;
  height: 150rpx;
  background: rgba(0, 0, 0, 0.4);
}
.ipt {
  display: inline-block;
  margin: 18rpx 0 18rpx 20rpx;
  width: 558rpx;
  height: 64rpx;
  color: #ffffff;
  font-size: 28rpx;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8rpx;
  opacity: 0.6;
}
.placeholder {
  opacity: 0.6;
  font-size:28rpx;
  color:#fff;
}
.btn {
  position: absolute;
  top: 18rpx;
  display: inline-block;
  width: 56rpx;
  height: 56rpx;
}
.btn-1 {
  right: 95rpx;
}
.btn-2 {
  right: 20rpx;
}
.desc {
  display: block;
  padding: 0 0 0 20rpx;
  font-size: 24rpx;
  opacity: 0.6;
  line-height: 24rpx;
}
.video-box {
   width: 100%;
  position: relative;
}
.video {
  width: 100%;
  height: 100%;
}
.action {
  position: absolute;
  right: 0;
  bottom: 150rpx;
  left: 0;
  width: 100%;
  height: 300rpx;
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  font-size: 22rpx;
}
.docInfo {
  min-height: 280rpx;
  padding-bottom: 30rpx;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 999;
  background: #141726;
  border-radius: 21rpx 21rpx 0 0;
  .docTop {
    margin: 16rpx 11rpx 22rpx 0;
    overflow: hidden;
    img {
      float: right;
      width: 68rpx;
      height: 68rpx;
    }
  }
  .docBtm {
    display: flex;
    img {
      width: 130rpx;
      height: 130rpx;
      border-radius: 100%;
      margin: 0 20rpx 0 37rpx;
    }
    .docBtmFr {
      margin-top: 3rpx;
      margin-right: 37rpx;
      font-size: 26rpx;
      color: #fff;
      flex: 1;
      overflow: hidden;
      .docBtmFrTop {
        margin-bottom: 4rpx;
        span:nth-child(1) {
          color: #9DBAFF;
          font-size: 34rpx;
        }
      }
    }
  }
}
.presentBox {
  min-height: 630rpx;
  z-index: 990;
  .presentItem {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    ul {
      height: 100%;
      width: 100%;
      padding: 0 20rpx;
      li {
        display: inline-block;
        flex-direction: column;
        width: 160rpx;
        // height: 185rpx;
        margin: 0 15rpx;
        background-color: rgba(41, 45, 63, 1);
        border-radius: 24rpx;
        box-sizing: border-box;
        overflow: hidden;
        .imgBox {
          height: 140rpx;
          width: 100%;
          text-align: center;
          img {
            margin-top: 29rpx;
          }
        }
        .sendBtn {
          height: 46rpx;
          width: 100%;
          background-color: rgba(0, 136, 255, 1);
          color: rgba(255, 255, 255,0.8);
          font-size: 26rpx;
          text-align: center;
          line-height: 46rpx;
        }
      }
      .flowerBox {
        img {
          height: 95rpx;
          width: 114rpx;
        }
      }
      .flagBox {
        img {
          height: 95rpx;
          width: 81rpx;
        }
      }
    }
  }
}
.iptDiv {
  position: absolute;
  bottom: 0rpx;
  left: 0;
  height: 150rpx;
  width: 100%;
  display: flex;
  height: 150rpx;
  background-color: rgba(63, 63, 63, 0.5);
  .clearText {
    height: 50rpx;
    width: 50rpx;
    position: absolute;
    right: 200rpx;
    top: 34rpx;
  }
  .input {
    display: inline-block;
    flex: 1;
    margin: 25rpx 50rpx 0 50rpx;
    height:68rpx;
    line-height: 68rpx;
    font-size: 28rpx;
    display: flex;
    input {
      border-radius:34px;
      padding-left: 20rpx;
      padding-right: 20rpx;
      flex: 1;
      height: 100%;
      background:rgba(0,0,0, 0.39)!important;
    }
    div {
      height: 68rpx;
      line-height: 68rpx;
      width: 120rpx;
      background: #0088FF;
      text-align: center;
      border-radius: 34rpx;
      margin-left: 20rpx;
    }
    div:active {
      background: #6DBBFF;
    }
    span {
      margin-left: 10rpx;
      img {
        height: 68rpx;
        width: 68rpx;
      }
    }

  }
}
.isIphoneX {
  height: 180rpx;
}
.mask{
  width: 100%;
  height: 100%;
  background: rgba(55,55,57,0.5);
  z-index: 100;
  position: relative;
}
// .login_content .active {
//   color: #0088FF!important;
//   border-bottom: 1px solid #0088FF!important;
// }
.login_content{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-top: 130rpx;
  font-size:32rpx;
  .login_phone,.login_password{
    font-size:32rpx;
    color:#CCCCCC;
    height: 100rpx;
    width: 80%;
    display: flex;
    justify-content: flex-start;
    flex-direction: row;
    border-bottom: 1px solid #CCCCCC;
    align-items: center;
    .login_ico1{
      width: 30rpx;
      height: 39rpx;
      margin-right: 30rpx;
    }
    .login_ico2{
      width: 34rpx;
      height: 39rpx;
      margin-right: 30rpx;
    }
  }
}
.login_footer{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 80rpx;
  .login_button{
    width: 100%;
    height: 100rpx;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    .button{
      width: 100%;
      height: 100rpx;
    }
  }
  .login_text{
    display: inline-block;
    background: #0088FF;
    position: absolute;
    font-size:36rpx;
    font-family:PingFangSC;
    font-weight:400;
    color:rgba(255,255,255,1);
    height: 90rpx;
    line-height: 90rpx;
    width: 624rpx;
    text-align: center;
    border-radius: 45rpx;
  }
}
.liveClass{
  position: absolute;
  z-index: 200;
  width: 100%;
  height: 100%;
  top:0;
}
.modal {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgba(0,0,0,.7);
    opacity: 1;
    z-index: 100;
    .out {
      height: 412rpx;
      border-radius: 15rpx;
      width: 650rpx;
      background: #fff;
      z-index: 999;
      position: absolute;
      left: 50%;
      top: 50%;
      margin-top: -206rpx;
      margin-left: -325rpx;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      .top {
        flex: 1;
        padding: 110rpx 48rpx 0 48rpx;
        text-align: center;
        span {
          font-size: 34rpx;
          font-family:PingFangSC-Regular,PingFangSC;
          font-weight:400;
          line-height:48rpx;
          color:#333333;
        }
      }
      .btm {
        height: 100rpx;
        line-height: 100rpx;
        display: flex;
        font-size:34rpx;
        font-family:PingFangSC-Regular,PingFangSC;
        font-weight:400;
        .sure {
          background:#4A64EA;
          color: #fff;
        }
        .cancelClass{
          background:#F7F8FA;
          color:#333333;
        }
        span {
          flex: 1;
          text-align: center;
        }
        span:nth-child(2) {
          background:#4A64EA;
          color: #fff;
        }
      }
    }
  }
  .ipt {
  width: 640rpx;
}
.action {
  height: 174rpx;
}
.action-play {
  position: absolute;
  left: 0;
  display: inline-block;
  width: 294rpx;
}
.action-play-btn {
  margin: 20rpx 0 0 44rpx;
  width: 134rpx;
}
.action-play-img {
  width: 134rpx;
  height: 134rpx;
}
.action-param {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  padding: 0;
  width: 450rpx;
}
.action-param-item {
  background: rgba(0, 0, 0, 0.3);
}
.action-param-img {
  display: block;
  margin: 20rpx auto 12rpx;
  width: 44rpx;
  height: 44rpx;
}
.noData {
    position: relative;
    height: 100%;
    background:rgba(4,4,4,0.34);
    display:flex;
    justify-content:center;
    align-items:center;
    img {
      width: 184rpx;
      height: 184rpx;
      margin-bottom: 90rpx;
    }
    p {
      position: absolute;
      // left: 38%;
      top: 57%;
      height:45rpx;
      font-size:32rpx;
      font-weight:400;
      color:rgba(204,204,204,1);
      line-height:45rpx;
    }
  }
</style>
